import React from "react";
// import logo from "./logo.svg";
import "./App.css";
// import App from "./App";

// Day01
// 引入 HelloWorld 组件
import HelloWorld from "./Day01/HelloWorld";

// 引入 HelloWorldFn 组件
import HelloWorldFn from "./Day01/HelloWorldFn";

// 引入 NumberList 组件
import NumberList from "./Day01/NumberList";

// 引入 Fbnq 组件
import Fbnq from "./Day01/Fbnq";

// 引入 Input 组件
import Input from "./Day01/Input";

// Day02
import constructor_ from "./Day02/Constructor";
import FetchUser from "./Day02/FetchUser";
import FetchUserBtn from "./Day02/FetchUserBtn";
import Form from "./Day02/Form";
import formHOC from "./Day02/FormHOC";
import windowWidthHoc from "./Day02/WindowWidthHOC";
// 阶段实战——计算器
import Calculator from "./Day02/Calculator";

// Day03
import Function from "./Day03/Function";
import FunctionState from "./Day03/FunctionState";
import Context from "./Day03/Context";
import TimerHook from "./Day03/TimerHook";
import Reducer from "./Day03/Reducer";
import Callback from "./Day03/Callback";
// 阶段实战——时钟
import Clock from "./Day03/Clock";

// Day04
import FormHook from "./Day04/FormHook";
import GetUser from "./Day04/GetUser";
// 阶段实战——多人点餐
import Order from "./Day04/Order";

// Day07
import GetAntD from "./Day07/AnDFirst";
// Day08
import SearchByForm from "./Day08/SearchByForm";

// test
import Test1 from "./Test/PropsTest1";
import Test2 from "./Test/PropsTest2";

const menus = [
  {
    id: 1,
    title: "HelloWorld",
    Component: HelloWorld,
    groupTitle: "Day01",
  },
  {
    title: "Hello World Fn",
    Component: HelloWorldFn,
  },
  {
    title: "NumberList",
    Component: NumberList,
  },
  {
    title: "Fbnq",
    Component: Fbnq,
  },
  {
    title: "Input",
    Component: Input,
  },
  {
    id: 2,
    title: "constructor",
    Component: constructor_,
    groupTitle: "Day02",
  },
  {
    title: "FetchUser",
    Component: FetchUser,
  },
  {
    title: "FetchUserBtn",
    Component: FetchUserBtn,
  },
  {
    title: "Form",
    // Component: () => <Form btnText="用户登录" />,
    // 高阶组件包裹
    Component: windowWidthHoc(Form),
  },
  {
    title: "formHOC",
    // Component: () => (
    //   <formHOC title="HHOOCC" btnText="用户登录" defaultUsername="lisi" />
    // ),
    Component: formHOC,
  },
  {
    title: "windowWidthHoc",
    Component: windowWidthHoc,
  },
  {
    title: "P-Calculator",
    Component: Calculator,
  },
  {
    id: 3,
    title: "Function",
    Component: Function,
    groupTitle: "Day03",
  },
  {
    title: "FunctionState",
    Component: FunctionState,
  },
  {
    title: "Context",
    Component: Context,
  },
  {
    title: "P-Clock",
    Component: Clock,
  },
  {
    title: "TimerHook",
    Component: TimerHook,
  },
  {
    title: "Reducer",
    Component: Reducer,
  },
  {
    title: "Callback",
    Component: Callback,
  },
  {
    id: 4,
    title: "FormHook",
    Component: FormHook,
    groupTitle: "Day04",
  },
  {
    title: "GetUser",
    Component: GetUser,
  },
  {
    title: "P-Order",
    Component: Order,
  },
  {
    id: 4,
    groupTitle: "Day07",
    title: "GetAntD",
    Component: GetAntD,
  },
  {
    groupTitle: "Day08",
    title: "SearchByForm",
    Component: SearchByForm,
  },
  {
    id: 5,
    groupTitle: "Test",
    title: "Test1",
    Component: Test1,
  },
  {
    title: "Test2",
    Component: Test2,
  },
];

export default class App extends React.Component {
  // 设置状态
  state = {
    menusIndex: 0,
  };

  componentDidMount() {
    // 报错历史：需要转换截取的路径编号，它原本是字符串 ※
    const menusIndex = Number(window.location.hash.substring(1));
    // console.log(menusIndex);
    this.setState({ menusIndex });
  }

  onMenuChange = (menusIndex) => {
    this.setState({ menusIndex });
    // 存hash值
    window.location.hash = menusIndex;
  };

  render() {
    const { menusIndex } = this.state;
    // const { title, Component } = menus[menusIndex];
    const { Component } = menus[menusIndex];
    return (
      <div className="App">
        <div className="menu">
          <ul className="menu-ul">
            {menus.map((item, index) => {
              const isCurrent = index === menusIndex;
              return (
                // 使用map后没有key会报错 ※
                <div key={index}>
                  {item.groupTitle && <h2>{item.groupTitle}</h2>}
                  <li
                    className={isCurrent ? "active-menu" : ""}
                    onClick={() => this.onMenuChange(index)}
                  >
                    {item.title}
                  </li>
                </div>
              );
            })}
          </ul>
        </div>
        <div className="main">
          <Component />
        </div>
      </div>
    );
  }
}
